<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 100px;
        }

        .box {
            width: 3.75rem;
            height: 1rem;
            background-color: yellow;
        }
    </style>
    <script>
        /*
            以iphone6为例，设计师一般会给出750px宽的设计稿，而css像素为375px；
            所以我们的样式一般会把html的font-size设置为100px，把box宽度设置为3.75rem从而占满
            但是问题来了，未来访问你的页面的设备可不只是iphone6，其他的设备宽度不见得是750px，万一是个900px的呢?
            所以我们的做法通常是在js代码中，在页面初始化时候，将设备的宽度除以设计稿的宽度得到一个比例再乘以100，从而达到让3.75rem能够适配所有设备宽度的目的
        */
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 100+'px';
    </script>
</head>

<body>
    <div class="box"></div>
</body>

</html>